<template>
	<view class="page">
		<!-- 首页欢迎 -->
		<view class="welcome">
			<image class="avatarUrl" :src="avatarUrl" mode=""></image>
			欢迎你，{{nickName}}
		</view>
		
		<!-- 顶部统计 -->
		<view class="topTotal">
			<view class="totalNeo">
				本月收入：
				<view class="totalNum">
					<u-count-to font-size="24" color="#f0f0f0" duration="700" decimals="2" :start-val="30" :end-val="6000"></u-count-to>
				</view>
			</view>
			<view class="totalNeo">
				本月支出：
				<view class="totalNum">
					<u-count-to font-size="24" color="#f0f0f0" duration="700" decimals="2" :start-val="30" :end-val="6000"></u-count-to>
				</view>
			</view>
			<view class="totalNeo">
				每月预算：
				<view class="totalNum">
					<u-count-to font-size="24" color="#f0f0f0" duration="800" decimals="2" :start-val="30" :end-val="2000"></u-count-to>
				</view>
			</view>
			<view class="totalNeo">
				每日预算：
				<view class="totalNum">
					<u-count-to font-size="24" color="#f0f0f0" duration="900" decimals="2" :start-val="30" :end-val="200"></u-count-to>
				</view>
			</view>
			<view class="totalNeo">
				今日支出：
				<view class="totalNum">
					<u-count-to font-size="24" color="#f0f0f0" duration="1000" decimals="2" :start-val="30" :end-val="20"></u-count-to>
				</view>
			</view>
			<view class="totalNeo">
				当前结余：
				<view class="totalNum">
					<u-count-to font-size="24" color="#f0f0f0" duration="1000" decimals="2" :start-val="30" :end-val="20"></u-count-to>
				</view>
			</view>
		</view>
		
		<!-- 数据图模块 -->
		<view class="chartsBox">
			<view>
				<view class="chartsTit">实际</view>
				<!-- echarts 饼图展示 本月消费占比 -->
				<chart class="ec-canvas" @onInit="initThisMonth" canvasId="line" ref="thisMonthChart" />
				<view :style="{color: color[thisMonthShow]}" v-show="thisMonthShow != null" class="chartsTit">{{`${monthData[thisMonthShow]}:${thisMonthData[thisMonthShow]}元`}}</view>
			</view>
			<view>
				<view class="chartsTit">预计</view>
				<!-- echarts 饼图展示 本月预计消费占比 -->
				<chart class="ec-canvas" @onInit="initExpect" canvasId="line" ref="expectChart" />
				<view :style="{color: color[expectShow]}" v-show="expectShow != null" class="chartsTit">{{`${monthData[expectShow]}:${expectData[expectShow]}元`}}</view>
			</view>
		</view>
		<!-- 图例 -->
		<view class="legend">
			<view class="legendNeo" v-for="(item, index) in color" :key="index" :style="{color: item}">
				<view class="color" :style="{'background-color': item}"></view>{{monthData[index]}}
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/components/echarts/echarts.simple.min.js';
	import chart from '@/components/mpvue-echarts/src/echarts.vue';
	import initPie from '../../utils/pie.js'
	var _mine
	export default {
		props: {
			show: {
				type: Number,
				default: null
			}
		},
		components:{
			chart
		},
		data() {
			return {
				// 用户名
				nickName: '',
				// 头像
				avatarUrl: '',
				// 点击了本月饼图的哪个模块
				thisMonthShow: null,
				// 本月饼图数据
				thisMonthData: [820, 932, 901, 934, 1290 ],
				// 点击了预计饼图的哪个模块
				expectShow: null,
				// 预计饼图数据
				expectData: [820, 932, 901, 934, 1290 ],
				// 饼图下方展示项
				monthData: {
					'0': '收入',
					'1': '房租',
					'2': '水电',
					'3': '吃饭',
					'4': '其他',
				},
				// 饼图各模块颜色： 收入 房租 水电 吃饭 其他
				color:['#c23531', '#ca8622','#91c7ae','#d48265', '#d2a6dd']
			}
		},
		mounted() {
			_mine = this
			this.avatarUrl = uni.getStorageSync('avatarUrl')
			this.nickName = uni.getStorageSync('nickName')
		},
		methods: {
			// 初始化实际消费pie图
			initThisMonth: function(e) {
				const data = this.thisMonthData
				const that = this
				/* 参数列表 
					默认的e 该图的数据 pie图的ref  引入的echarts 引入的chart 该页面的this实例 点击函数
				*/
				initPie(e, this.thisMonthData, 'thisMonthChart', echarts, chart, this, params => {
					const { dataIndex: index } = params
					_mine.thisMonthShow = index
				})
			},
			// 初始化预计消费pie图
			initExpect: function(e) {
				const data = this.thisMonthData
				const that = this
				/* 参数列表
					默认的e 该图的数据 pie图的ref  引入的echarts 引入的chart 该页面的this实例 点击函数
				*/
				initPie(e, this.thisMonthData, 'expectChart', echarts, chart, this, params => {
					const { dataIndex: index } = params
					_mine.expectShow = index
				})
			}
		}
	}
</script>

<style scoped>
	.welcome{
		display: flex;
		line-height: 120rpx;
		align-items: center;
	}
	.avatarUrl{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
		box-shadow: 0 0 5px #F0AD4E;
	}
	.topTotal{
		margin: 80rpx 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: rgba( 0, 0, 0, .3);
		height: 240rpx;
		border-radius: 5px;
	}
	.totalNeo{
		width: 340rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		display: flex;
		box-sizing: border-box;
		padding-left: 20rpx;
	}
	.totalNum{
		width: 140rpx;
	}
	.ec-canvas {
		display: flex;
		width: 300rpx;
		height: 300rpx;
		flex: 1;
	}
	.chartsBox{
		height: 440rpx;
		display: flex;
		justify-content: space-between;
	}
	.chartsTit{
		text-align: center;
		line-height: 40rpx;
		margin-top: 20rpx;
	}
	.legend{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.legendNeo{
		display: flex;
		height: 40rpx;
		align-items: center;
	}
	.color{
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		border-radius: 50%;
		overflow: hidden;
	}
</style>
